import * as React from 'react';

// import { RootState, AppDispatch } from '@/app/store';
// import Slider from '../slider/index';
import { ORDER_DEPART } from './constant';
import type { ListItemProps } from '../../types';
import './index.module.scss';
import { useAppSelector, useAppDispatch } from '@/app/hooks';
// import { selectQuery, getQueryAsync } from './indexSlice';
const { memo, useMemo, useState, useReducer } = React;

interface BottomProps {
  // toggleOrderType: () => void;
  // toggleOnlyTickets: () => void;
  highSpeed: boolean;
  changeData: (val: ListItemProps[]) => void;
  trains: ListItemProps[];
  // allTrains: ListItemProps[];
  changeTighSpeed: (val: any) => void;
  changeHaveTicket: (val: any) => void;
  changeTimeSort: (val: any) => void;
  haveTicket: boolean;
  timeSort: number;
  // orderType: number;
  // haveTicket: boolean;
}
function Bottom(props: BottomProps) {
  const {
    // toggleOrderType,
    // orderType,
    highSpeed,
    changeData,
    trains,
    // allTrains,
    // onlyTickets,
    changeTighSpeed,
    changeHaveTicket,
    changeTimeSort,
    haveTicket,
    timeSort,
    // haveTicket,
    // toggleOnlyTickets,
  } = props;
  // const [orderType, setOrderType] = useState(ORDER_DEPART);
  function seeTickets() {
    changeHaveTicket(!haveTicket);
    changeData(trains);
  }
  function seeHighSpeed() {
    changeTighSpeed(!highSpeed);
    changeData(trains);
  }
  function seeTimeSort() {
    if (timeSort === 1) {
      changeTimeSort(0);
    } else {
      changeTimeSort(1);
    }
    changeData(trains);
  }
  return (
    <div styleName="bottom">
      <div styleName="bottom-filters">
        <span styleName="item" onClick={() => seeTimeSort()}>
          <i styleName="icon">&#xf065;</i>
          {timeSort === 0 ? '出发 早→晚' : '耗时 短→长'}
        </span>
        <span
          styleName={highSpeed ? 'item item-on' : 'item'}
          onClick={() => seeHighSpeed()} //setOnlyHighSpeed(!onlyHighSpeed)
        >
          <i styleName="icon">{highSpeed ? '\uf43f' : '\uf43e'}</i>
          只看高铁动车
        </span>
        <span
          styleName={!haveTicket ? 'item' : 'item-on item'}
          onClick={() => seeTickets()}
        >
          <i styleName="icon">{haveTicket ? '\uf43d' : '\uf43c'}</i>
          只看有票
        </span>
        {/* <span
          styleName={!noChecked ? 'item item-on' : 'item-on'}
          onClick={console.log}
        >
          <i styleName="icon">{noChecked ? '\uf0f7' : '\uf446'}</i>
          综合筛选
        </span> */}
      </div>
      {/* {isFiltersVisible && (
        <BottomModal
          ticketTypes={ticketTypes}
          trainTypes={trainTypes}
          departStations={departStations}
          arriveStations={arriveStations}
          checkedTicketTypes={checkedTicketTypes}
          checkedTrainTypes={checkedTrainTypes}
          checkedDepartStations={checkedDepartStations}
          checkedArriveStations={checkedArriveStations}
          departTimeStart={departTimeStart}
          departTimeEnd={departTimeEnd}
          arriveTimeStart={arriveTimeStart}
          arriveTimeEnd={arriveTimeEnd}
          setCheckedTicketTypes={setCheckedTicketTypes}
          setCheckedTrainTypes={setCheckedTrainTypes}
          setCheckedDepartStations={setCheckedDepartStations}
          setCheckedArriveStations={setCheckedArriveStations}
          setDepartTimeStart={setDepartTimeStart}
          setDepartTimeEnd={setDepartTimeEnd}
          setArriveTimeStart={setArriveTimeStart}
          setArriveTimeEnd={setArriveTimeEnd}
          toggleIsFiltersVisible={toggleIsFiltersVisible}
        />
      )} */}
    </div>
  );
}
export default memo(Bottom);
